<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .menu{
            list-style: none;
            padding: 0px;
            margin: 0px;
            display: flex;
            flex-flow: row nowrap;
            font-weight: bold;
        }
        .menu li{
            margin: 0px 10px;
            padding: 16px 24px;
            cursor: pointer;
            user-select: none;
        }
        .menu li:hover{
            color: orange;
        }
        .cbox{
            border: 1px solid #999;
            padding: 20px;
            margin: 10px 0px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>组件缓存技术</h4>
        <pre>
        通过 keep-alive 组件标签包裹 动态组件 componet 实现动态组件切换时，对设定部分组件作为内存记录操作，
        让组件切换不完成组件的反复创建删除操作；但组件缓存是需要占用计算机存储内存的，因此需要注意缓存数量；
        keep-alive 提供 max 设置最大缓存上限，提供include 和 exclude 控制缓存组件；
        </pre>
        <ul class="menu">
            <li @click="changePage('HomePage')">首页</li>
            <li @click="changePage('ListPage')">列表</li>
            <li @click="changePage('AboutPage')">关于我</li>
        </ul>
        <hr>
        <!-- 动态组件技术是通过对组件的创建和销毁操作实现切换功能 -->
        <!-- <component :is="pageName"></component> -->
        <!-- <keep-alive :include="['HomePage','ListPage']">
            <component :is="pageName"></component>
        </keep-alive> -->
        <!-- <keep-alive exclude="AboutPage">
            <component :is="pageName"></component>
        </keep-alive> -->
        <keep-alive :max="2">
            <component :is="pageName"></component>
        </keep-alive>
        <hr>
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        const HomePage = {
            name:"HomePage",
            template:`
            <div class="cbox">
                <h4>首页</h4>
            </div>
            `,
            beforeCreate () {
                console.log("首页创建");
            },
            unmounted () {
                console.log("首页销毁");
            },
        }
        const ListPage = {
            name:"ListPage",
            template:`
            <div class="cbox">
                <h4>列表</h4>
            </div>
            `,
            beforeCreate () {
                console.log("列表创建");
            },
            unmounted () {
                console.log("列表销毁");
            },
        }
        const AboutPage = {
            name:"AboutPage",
            template:`
            <div class="cbox">
                <h4>关于我</h4>
            </div>
            `,
            beforeCreate () {
                console.log("关于我创建");
            },
            unmounted () {
                console.log("关于我销毁");
            },
        }
        createApp({
            components: {
                HomePage,ListPage,AboutPage
            },
            data(){
                return {
                    pageName:"HomePage"
                }
            },
            methods: {
                changePage(name) {
                    this.pageName = name;
                    location.hash = this.pageName;
                },
                initShowPage(){
                    let hashName = location.hash;
                    console.log(hashName);
                    if(hashName==""){
                        return;
                    }
                    this.pageName = hashName.replace(/^#/,"");
                }
            },
            created () {
                this.initShowPage()
            },
        }).mount("#app")
    </script>
</body>
</html>